Css3屬性比css 2強(qiáng)很多。增加了很多新的屬性，今天重點(diǎn)介紹開發(fā)中會(huì)用到的css3屬于。

　　1、 css3媒體查詢，是開發(fā)自適應(yīng)網(wǎng)站的必備。

　　常規(guī)寫法：

　　@media (min-width: 700px) { 選擇器 { 樣式 } }

　　@media mediatype and | not | only (media feature) {}

　　2、 布局方式使用彈性盒子

　　寫法：

　　Display:flex

　　justify-content: flex-start | flex-end | center | space-between | space-around;

　　align-items: flex-start | flex-end | center | baseline | stretch;

　　flex-direction: row | row-reverse | column | column-reverse;

　　flex-wrap: nowrap | wrap | wrap-reverse;

　　align-content: flex-start | flex-end | center | space-between | space-around | stretch;

　　flex-flow:||;

　　align-self: auto | flex-start | flex-end | center | baseline | stretch;

　　3、 偽類選擇器

　　:first-child選擇父元素里邊的第一個(gè)子元素

　　:last-child選擇父元素里邊的最后一個(gè)子元素

　　:nth-child(n)選擇父元素里邊第n個(gè)子元素

　　:nth-last-child(n)選擇父元素里邊倒數(shù)第n個(gè)子元素

　　:nth-of-type(n)

　　：nth-last-of-type(n)

　　:first-of-type

　　:last-of-type

　?。簅nly-child

　?。簅nly-of-type

　　：empty

　　::before

　　::after

　　::selection

　　::first-letter

　　::first-line

　　4、 動(dòng)畫屬性

　　透明度 opacity: 0.5;

　　(transition)過渡樣式屬性

　　過渡屬性

　　transition: all 2s linear 1s;

　　all所有能過渡屬性都過渡，具體屬性名如：width：只有width有過渡。數(shù)字+s秒

　　transition-property: width;

　　規(guī)定應(yīng)用過渡的 CSS 屬性的名稱

　　花費(fèi)時(shí)間

　　transition-duration: 1s;

　　定義過渡效果花費(fèi)的時(shí)間，默認(rèn)是 0

　　時(shí)間曲線

　　transition-timing-function:linear;

　　過渡效果的時(shí)間曲線，默認(rèn)是 "ease"

　　何時(shí)開始

　　transition-delay: 2s;

　　規(guī)定過渡效果何時(shí)開始，默認(rèn)是 0

　　注意點(diǎn)：

　　1、過渡需要：默認(rèn)狀態(tài) 和hover狀態(tài)樣式不同，才能有過渡效果

　　2、transition屬性給需要過渡的元素本身加

　　3、transition屬性設(shè)置在不同狀態(tài)中，效果不同

　?、?、給默認(rèn)狀態(tài)設(shè)置，鼠標(biāo)移入移出都有過渡效果

　?、?、給hover設(shè)置狀態(tài)，鼠標(biāo)移入有過渡效果，移出沒有過渡效果

　　(transform)平面2D 轉(zhuǎn)換樣式屬性

　　transform：translate;

　　旋轉(zhuǎn)

　　transform：rotate(角度);

　　指定對象的2D rotation(2D旋轉(zhuǎn))，角度單位是(deg)，需先有transform-origin屬性的定義

　　旋轉(zhuǎn)中心

　　transform-origin：

　　默認(rèn)圓點(diǎn)是盒子中心點(diǎn)(原點(diǎn)水平位置,原點(diǎn)垂直位置)允許您改變被轉(zhuǎn)換元素的位置(即是參考點(diǎn))

　　旋轉(zhuǎn)取值

　　left,right,top,bottom,

　　center

　　旋轉(zhuǎn)transform-origin屬性取值(單位可以寫像素，也可以寫百分比)

　　縮放

　　transform：scale;

　　指定對象的2D scale(2D縮放)，第一個(gè)參數(shù)對應(yīng)X軸，第二個(gè)參數(shù)對應(yīng)Y軸。如果第二個(gè)參數(shù)未提供，則默認(rèn)取第一個(gè)參數(shù)的值

　　平面轉(zhuǎn)換：

　　1、改變盒子在平面內(nèi)的形態(tài)(位移、旋轉(zhuǎn)、縮放)

　　2、2D轉(zhuǎn)換：①、 移動(dòng) translate ②、 旋轉(zhuǎn) rotate ③、縮放 scale

　　備注：旋轉(zhuǎn)角度單位是(deg) 旋轉(zhuǎn)需要加過渡效果

　　(transform)3D空間轉(zhuǎn)換轉(zhuǎn)換樣式屬性

　　transform: translate3d(x,y,z);

　　在translate2D的基礎(chǔ)上增加z軸方向上的維度translateX(n),translateY(n)，translateZ(n)

　　旋轉(zhuǎn)transform: rotate3d(x,y,z,deg);

　　3D呈現(xiàn)

　　transform-style: preserve-3d;

　　縮放

　　transform：scale3d(x,y,z);空間縮放效果scaleY(倍數(shù)), scaleZ(倍數(shù)),scaleX(倍數(shù))

　　3D轉(zhuǎn)換：

　　①、移動(dòng) translate3d ②、透視perspective ③、旋轉(zhuǎn)rotate3d ④、3D呈現(xiàn)transfrom-style

　　備注：透視 perspective寫在父元素上(近大遠(yuǎn)小)

　　3D呈現(xiàn)transform-style: preserve-3d; 寫給父級(jí)

　　(animation)動(dòng)畫樣式屬性

　　定義動(dòng)畫@keyframes

　　動(dòng)畫屬性animation

　　動(dòng)畫名稱animation-name

　　時(shí)間周期animation-duration

　　速度曲線animation-timing-function

　　規(guī)定動(dòng)畫的速度曲線，默認(rèn)是"ease"。勻速：linear

　　動(dòng)畫開始animation-delay

　　播放次數(shù)animation-iteration-count

　　逆向播放animation-direction